<template>
  <el-container style="height:100%;min-width: 1280px;">
    <el-aside width="180px">
      <div class="cloud-dye-logo">
        <div class="title">云上办公</div>
      </div>

      <div>
        <el-scrollbar>
          <el-menu            
            active-text-color="#ffd04b"
            background-color="#545c64"            
            default-active="2"
            text-color="#fff"
            style="width: 180px"
            @select="goUrl"
           
            
          >
            <el-sub-menu
              v-for="main in menuList" :key="main.menuId"
              :index="main.menuId+''"
            >
              <template #title>
                <el-icon><folder /></el-icon>
                <span>{{main.menuName}}</span>
              </template>

              <el-menu-item
                v-for="sub in main.subMenuList" :key="sub.menuId"
                :index="sub.menuUrl"
                >{{sub.menuName}}</el-menu-item>

               

            </el-sub-menu>

          </el-menu>

        </el-scrollbar>
      </div>
    </el-aside>
    <el-container>
      <el-header>
        <div
          style="
            line-height: 50px;
            color: #409eff;
            font-weight: bold;
            font-size: 24px;
            letter-spacing: 2px;
          "
        >
          云协同OA信息系统
        </div>
        <div style="position: absolute; bottom: 10px; right: 10px">
          <span style="vertical-align: middle"
            >当前用户：{{currentUser.userId}}|{{currentUser.userName}}</span>
          &nbsp;
          <el-link>&nbsp;退出系统</el-link>
        </div>
      </el-header>
      <el-main>
        <el-card 
          style="flex:auto;display:flex;flex-direction:column;overflow: auto;" >         
          
            <router-view></router-view>
          
        </el-card>
      </el-main>
      <el-footer style="height: 30px;line-height: 26px;font-size: 14px;">
        版权所有&nbsp;&copy;2000-2022&nbsp; 冰雪墩融软件开发有限公司
      </el-footer> 
    </el-container>
  </el-container>
</template>

<script setup>
import { ref } from 'vue';
import {useRouter} from 'vue-router'
import { get } from '@/request';
import { Folder, FolderOpened, CircleClose } from "@element-plus/icons-vue";

const router = useRouter();


//菜单列表
const menuList = ref([]);
const getMenuList = async ()=>{
  const result = await get('/security/home/menu-list');
  menuList.value = result.data;
};
getMenuList();

const currentUser = ref({
  userId:'',
  userName:''
})

const getCurrentUser = async ()=>{
  const result = await get("/security/home/curr-user");
  currentUser.value = result.data;
};

getCurrentUser();

const goUrl = (url)=>{
  router.push(url);
};


</script>

<style scoped>

.el-header {
  position: relative;
  background-color: #ffffff;
  text-align: left;
  height: 50px;

  border-bottom: 1px solid #dcdfe6;
  padding-left: 5px;
}
.el-footer {
  background-color: #ffffff;
  text-align: center;
  
  border-top: 1px solid #dcdfe6;
}

.el-aside {
  background-color: #545c64;
  text-align: left;
}

.el-main {
 
  padding:5px;
  background-color: #ffffff;
  display:flex;flex-direction: column;
}

.cloud-dye-logo {
  box-sizing: border-box;
  margin-left: 25px;
  margin-top: 20px;
  margin-bottom: 30px;
  padding: 15px 15px 15px 22px;
  width: 120px;

  box-shadow: 0px 0px 10px 0px #a0cfff;
  text-shadow: 5px 5px 10px white;

  background-color: #a0cfff;
  color: #ffffff;

  font-weight: bold;
  text-align: center;
  font-size: 30px;
  letter-spacing: 10px;

  border-radius: 20px;
}
.el-menu{
  border-right:none;
}
.el-aside .el-sub-menu .el-menu-item {
  min-width: 180px;
}

</style>